import React from 'react'
import './style.css'

export interface IProgressProps {
  step?: number;
  total?: number;
  showInfo?: boolean;
  color?: string;
  width?: number;
  barWidth?: number;
  prefixCls?: string; // 更好的对组件样式定制
}
const ProgressBar:React.FC<IProgressProps> = (props) => {
  const {
    prefixCls,
    barWidth,
    step,
    total,
    showInfo,
    color,
    ...restProps
  } = props
  let percent,
      text,
      progressInfo,
      progress;
      
      // 封装 
      const prcentDeal = (step: number | undefined,  // 联合数据类型
        total: number | undefined): number => {
          if (!step || !total) {
            return 0
          }
        return (step/total) * 100;
      }
      const validProgress = (progress: number | undefined) => {
        if (!progress || progress < 0) {
          return 0;
        } else if (progress > 100) {
          return 100;
        }
        return progress;
      }
      const parseIntPerent = (text: number):string => `${Math.ceil(text)}%`;
      percent = prcentDeal(step, total);
      text = parseIntPerent(validProgress(percent));
      const fixTipsStyle = {
        left: text
      }
      if (showInfo) {
        progressInfo = (
          <div className={`${prefixCls}-show-info`}>
            <span className={`${prefixCls}-text`}>{text}</span>
          </div>
        )
      }
      const percentStyle = {
        width: text,
        height: "12px",
        background: color,
        borderRadius: "100px"
      }
      const fixOuterStyle = {
        marginTop: "30px"
      }
      progress = (
        <div>
          <div className={`${prefixCls}-outer`} style={fixOuterStyle}>
            <div className={`${prefixCls}-inner`}>
              <div className={`${prefixCls}-bg`} style={percentStyle}>
                {progressInfo || null}
              </div>
            </div>
          </div>
        </div>
      )
  return (
    <div {...restProps} className='tiger-progress'>
      {progress}
    </div>
  )
}

export default ProgressBar